<template>
  <div class="login-page">
    <div class="bg">
      <img class="image" src="@/assets/images/login-bg.jpg" />
    </div>
    <div class="login-wrapper">
      <div class="title">登录</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="name">
          <el-input @input="handlePhoneInput" v-model="ruleForm.name" clearable prefix-icon="el-icon-mobile-phone" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :type="visible ? 'text' : 'password'"
            :minlength="6"
            :maxlength="32"
            v-model="ruleForm.password"
            clearable
            prefix-icon="el-icon-lock"
            placeholder="密码"
          >
            <i v-if="visible" slot="suffix" class="iconfont icon-visible" @click="visible = false"></i>
            <i v-else slot="suffix" class="iconfont icon-hide" @click="visible = true"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="handleSubmit">
            登录
          </el-button>
        </el-form-item>
      </el-form>
      <div class="actions">
        <el-button type="text" @click="$router.push('register')">注册</el-button>
        <el-button type="text">忘记密码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { isNumLetter } from '@/utils/regs'
import { login } from '@/api/login'
import { mapActions } from 'vuex'

export default {
  name: 'login',
  data() {
    let validatePassword = (rule, value, callback) => {
      if (!isNumLetter(value)) {
        callback(new Error('密码只能输入数字和字母'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      ruleForm: {
        name: '',
        password: ''
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 32,
            message: '密码至少六位',
            trigger: 'blur'
          },
          { validator: validatePassword, trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    ...mapActions(['SET_USERINFO', 'GET_NAVLIST', 'GET_MENULIST']),
    /**
     * 登录处理
     */
    handleSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.loading = true
          let res = await login(this.ruleForm).catch(() => (this.loading = false))
          this.loading = false
          let { code, data, msg } = res
          if (code === 0) {
            this.$message.success(msg)
            // 保存用户信息
            this.SET_USERINFO(data)
            this.$router.push('/home')
          }
        }
      })
    },
    /**
     * 控制手机只能输入11位
     */
    handlePhoneInput(val) {
      let len = 11
      if (val && val.length > len) {
        this.ruleForm.phone = val.substr(0, len)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
